<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>静态数据树</title>
	
	<link href="../../contextmenu/jquery.contextmenu.css" class="view-source" rel="stylesheet" type="text/css" />
    <link  href="../jquery.tree.css" rel="stylesheet" type="text/css"  class="view-source"/>
	<link  href="../../../../themes/default/style.css" rel="stylesheet" class="view-source">
	<script src="../../../../scripts/jquery.js" type="text/javascript" class="view-source"></script>
	<script src="../../../../scripts/common.js" type="text/javascript" class="view-source"></script>
	<script src="../../../../scripts/browserfix.js" type="text/javascript"  class="view-source"></script>
	<script src="../../../../scripts/plugins/jquery.json.js" type="text/javascript"></script>
	
	<script src="../../contextmenu/jquery.contextmenu.js" type="text/javascript" class="view-source"></script>
、
	<script src="../jquery.tree.js" type="text/javascript" class="view-source"></script>
	
	<script src="../../demo.js"></script>
	<link href="../../demo.css" rel="stylesheet">

	 
	<style>
		.tree{
			width:200px;
			height:240px;
		}
	</style>
	
	<script class="view-source noparse">
$(function(){
	var json_data = {//静态数据
		id:'11',
		text:'根节点',
		isExpand:true,
		childNodes:[{
			id:'21',
			text:'子节点1',
			childNodes:[{
				id:'youda1',
				text:'子节点1-1'
			}]
		},{
			id:'31',
			text:'子节点2'
		}]
	 } ;


	function menuAddAction(){
		if( !confirm('确认添加子节点吗?') )return ;
		var id = this.data.id ;
		$('#default-tree').tree().addNode( {id:id+'01',text:'动态添加',parentId:id}) ;
	}
	
	function menuUpdateAction(){
		if( !confirm('确认更新该节点吗?') )return ;
		var id = this.data.id ;
		$('#default-tree').tree().updateNode( {id:id,text:'已经修改'}) ;	
	}
	
	function menuDeleteAction(){
		if( !confirm('确认删除该节点吗?') )return ;
		var id = this.data.id ;
		$('#default-tree').tree().deleteNode( id ) ;	
	}
	
	$('#default-tree').tree({//tree为容器ID
		dataSourceMode:'data',
		data:json_data,
		contextMenu:function( record ){
			//record为树查询获取的行对象，可以根据行对象返回对应的右键菜单项
			return { 
					width: 100, 
					items: [
	                             { text: "新增", icon: "images/add.gif",id: record.id, action: menuAddAction},
	                             { text: "修改", icon: "images/edit.png",id: record.id, action: menuUpdateAction },
	                             { type: "splitLine" },
	                             { text: "删除", icon: "images/delete.gif",id: record.id, action: menuDeleteAction }
	                      ]
	                } ;
		}
	}) ;

})

//<div id="default-tree" class="tree" style="padding: 5px; overflow-y: auto; height:150px;"></div>
	</script>
	
</head>

<body>
	<div id='content-default' class='demo'>
			<h1></h1>
			<div id="default-tree" class="tree" style="padding: 5px; overflow-y: auto; height:150px;"></div>
	</div>
	
		<div style="clear:both"></div>
	
</body>
</html>